import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()

    this.state = {
      message: 'Hello World',
      counter: 0,
    }
  }

  changeText() {
    // 1.setState更多用法
    // 1.基础用法
    /* this.setState({
      message: 'aaa',
    }) */

    // 2. setState可以传入一个回调函数
    /* this.setState((preState, preProps) => {
      // 1.编写一个对新对的state处理逻辑
      // 2.会将之前的props和state传递进来
      console.log(preState, preProps)
      return {
        message: 'bbb',
      }
    }) */

    // 3.setState在React的事件处理中是一个异步操作
    // 如果希望在数据更新之后（数据合并），获取到对应的结果执行一些代码逻辑，那么可以在setState中传入第二个参数：callback
    this.setState(
      {
        message: 'abda',
      },
      () => {
        console.log(this.state.message, '里面的')
      }
    )
    // 还是hello world
    console.log(this.state.message, '外面的')
  }

  increment() {}

  render() {
    const { message, counter } = this.state

    return (
      <div>
        <h2>message: {message}</h2>
        <button onClick={() => this.changeText()}>修改文本</button>
        <h2>当前计数：{counter}</h2>
        <button onClick={() => this.increment()}>+1</button>
      </div>
    )
  }
}

export default App
